<template>
	<view>
		<custom-navigation-bar title="管家申请"></custom-navigation-bar>
		<view class="main">
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						姓名
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入姓名" v-model="data.name" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						性别
					</view>
					<view class="form-item-countent">
						<radio-group @change="updateSex" style="margin-top: 20rpx;">
							<radio value="0" class="custom-radio" checked />男
							<radio value="1" class="custom-radio" />女
						</radio-group>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						电话
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入电话" v-model="data.phone" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						申请区域
					</view>
					<view class="form-item-countent">
						<position-picker class="position-picker" @update-region="regionChange"></position-picker>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						详细地址
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入详细地址" v-model="data.position" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						申请小区
					</view>
					<view class="form-item-countent">
						<!-- <picker mode = selector @change="communityChange" :range="communityArray" range-key="name">
							<view style="padding: 20rpx;background-color: white;">{{ community }}</view>
						</picker> -->
						<input type="text" class="form-item-input" placeholder="请选择申请小区" v-model="data.communityStr" @click="selectAddress" disabled/>
						
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<!-- <view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						身份证号
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入身份证号" v-model="data.idCard" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view style="width: 84%;float: left;margin-left: 8%;">
					<uni-file-picker @select="handleIdSelect" @delete="handleIdDelete" limit="2" v-model="idImageFiles"
						title="请上传身份证反正面照片(最多2张)"></uni-file-picker>
				</view>
			</view> -->
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						开户行
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入银行名称"  v-model="data.bankName"/>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						银行卡号
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入银行卡号"  v-model="data.bankCard"/>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			
			<view class="form-item" style="border: none;">
				<view class="form-item-1" style="margin-top: 20rpx;font-size: 25rpx;border: none;" >
					<switch type="checkbox" checked="{{xieYiV}}" @change="xieYi"/>同意遵守<label style="color: blue;" @click="xieYiDetail">《社区管家合作协议书》</label>
				</view>
			</view>
			
			<view class="form-item" style="margin-top: 50rpx;">
				<view style="width: 84%;float: left;margin-left: 8%;">
					<view class="btn" @click="submit">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue'
	const xieYiV=ref(false);
	function xieYi(e){
		console.log( e.detail.value);
		xieYiV.value=e.detail.value
	}
	function xieYiDetail(){
		uni.navigateTo({
			url: "/pages/protocol/butler"
		});
	}
	function selectAddress()
	{
		uni.chooseLocation({
			success(res){
				console.log(res);
				data.value.communityStr=res.name
			},
			fail(res) {
				console.log(res);
				uni.showToast({
					icon: "none",
					title: "位置获取失败!"
				})
			}
		}) 
	}
	import {
		defineComponent
	} from 'vue';
	import http from '../../utils/http';
	import {
		generateApplicationId,
		getCurrentTimestamp,
		generateTime
	} from '../../utils/timeUtils';
	// 提取字段
	const data = ref({
		userId: getApp().globalData.user.userId, 
		name: '', // 姓名
		sex: 0, // 性别
		phone: '', // 联系电话
		province: '',
		city: "",
		district: "",
		communityStr:"",
		position: '', // 详细地址
		community: '', // 社区
		idCard: '', // 身份证号
		bankName: '', // 开户行
		bankCard: '', // 银行卡号
		idImage: []
	});
	
	import {
		onLoad,
	  	onPageScroll
	} from '@dcloudio/uni-app';
	const idImageFiles=ref([]); 
	onLoad((query) => {
		console.log("query.id:",query.id)
		 //获取商户信息
		 if(query.id){
			http.request({
				url: "/x/partner/butler/get",
				method: "POST",
				data: {
					"butlerId": query.id
				}
			}).then((responseData) => { 
				console.log("2222222222222222222222222222222222222222")
				if(responseData.code==1){
					console.log("11111111111111111111111111111111")
					responseData.data.idImage=JSON.parse(responseData.data.idImage); 
					data.value=responseData.data;
					const obj=responseData.data.idImage; 
					var idImageArr=[];
					for(var i=0;i<obj.length;i++){ 
						console.log(obj[i])
						idImageArr.push({
							url:obj[i]
						})
						idImage.value.push(obj[i]);
					}
					idImageFiles.value=idImageArr;
				}
			}).catch((err) => {
				uni.showToast({
					icon: 'error',
					title: '请求失败'
				})
			}) 
		 } 
	}) 
	
	const idImage = ref([]);  
 
	// 性别
	function updateSex(e) {
		data.value.sex = e.target.value;
	}
	 
	// 所在区域
	function regionChange(e) {
		// console.log("position", e[0] + "-" + e[1] + "-" + e[2])
		// applicationContent.value.region = e[0] + "-" + e[1] + "-" + e[2]
		data.value.province = e[0]
		data.value.city = e[1]
		data.value.district = e[2]
		getCommunityList(e[1], e[2])
	}
	 
	const communityArray = ref([])
	const community = ref("请选择社区")
	// 申请的社区
	function communityChange(e) {
		community.value = communityArray.value[e.detail.value].name;
		data.value.community =communityArray.value[e.detail.value].id;
	}
   
	// 获取社区信息
	function getCommunityList(city,district) {
		http.request({
			url: "/home/village",
			method: "POST",
			data: {
				 village:{
					 "city": city,
					 "district": district
				 } 
			}
		}).then((responseData) => {
			if (responseData.code) {
				console.log("community", responseData.data)
				communityArray.value = responseData.data
			} else {
				uni.showToast({
					icon: 'error',
					title: responseData.message,
					duration: 3000
				})
				communityArray.value = []
			}
		}).catch((err) => {
			uni.showToast({
				icon: 'error',
				title: '请求失败'
			})
		})
	}
	function upload(tempFilePaths,type){
		uni.showLoading({
			title: '图片上传中',
			mask:true
		});
		uni.uploadFile({
			url: getApp().globalData.upLoadUrl,
			filePath: tempFilePaths.path,
			name: 'file', // 文件字段名
			formData: {
				"fileType": "application",
				"fileName": getCurrentTimestamp(),
				"userId": data.value.userId
			},
			success: (uploadRes) => { 
				uni.hideLoading();
				console.log(uploadRes.data);
				let jsonData = JSON.parse(uploadRes.data);
				if(jsonData.code==1){
					if(type=='idCard'){
						idImage.value.push(jsonData.data);
					}else{
						data.value.licenseImage=jsonData.data;
					}
				}else{
					uni.hideLoading();
					uni.showToast({
						title: '图片上传失败',
					    icon:'error',
						duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
					    mask:true
					});
				}
			},
			fail: (error) => {
				uni.showToast({
					title: '图片上传失败',
				    icon:'error',
					duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
				    mask:true
				});
			}
		});
	}
	//身份证正面照片
	function handleIdSelect(e) {
		const tempFilePaths = e.tempFiles;
		for(var i=0;i<tempFilePaths.length;i++){
			upload(tempFilePaths[i],'idCard');
		} 
	}
	
	function handleIdDelete(e) {
		console.log("delete", e)
		idImage.value.splice(e.index, 1); // 移除数组中对应的文件
	}
	async function submit() {
		if(!xieYiV.value){
			uni.showToast({
				icon: 'error',
				title: '请阅读协议'
			})
			return;
		}
		data.value.idImage= JSON.stringify(idImage.value);
		console.log(data.value);
		// 所有上传操作完成后，调用 http.request 
		uni.showLoading({
			title: '提交中',
			mask:true
		});
		
		http.request({
			url: "/X/application/butler",
			method: "POST",
			data: {
				butler: data.value
			}
		}).then((res) => { 
			console.log(res);
			uni.hideLoading();
			if(res.code==1){
				 uni.showToast({ 
				 	title: '申请成功'
				 })
				 wx.switchTab({
				   url: "/pages/my/my",
				   success: function(res) {
				     // 跳转成功
				   },
				   fail: function(err) {
				     // 错误处理
				   }
				 })
			}else if(res.code==0){
				 uni.showToast({
				 	icon: 'error',
				 	title: res.message
				 })
			}else if(res.code==-1){
				uni.navigateTo({
					url: "/pages/login/login"
				});
			}
		}).catch((err) => {
			uni.showToast({
				icon: 'error',
				title: '请求失败'
			})
		}) 
	}

	function test() {
		console.log("test", applicationContent.value)
		console.log("golbal", getApp().globalData.openid)
	}
</script>

<style>
	@import "./form.scss";
	Page{
		background: white;
	}
</style>